<template>
    <div>
        <div class="header">
            <div class="left">
                <p style="font-size: 20px;">摄像头列表</p>
            </div>
            <div class="right">
                <Button @click="addModal" type="primary" >新增摄像头</Button>
            </div>
        </div>
        <div style="width: 100%;">
            <Table :columns="columns7" :data="cameraData" style="width: 100%;"></Table>
        </div>
        <div>
            <Modal v-model="editModal" :title="modalTitle" width="600" style="z-index:9999" ok-text="保存" @on-ok="save">
                <Form ref="form" v-model="cameraForm" :label-width="labelWidth">
                    <FormItem label="序号:">
                        <Input disabled v-model="cameraForm.showid" size="small" style="width:400px"></Input>
                    </FormItem>
                    <FormItem label="摄像头名称:">
                        <Input v-model="cameraForm.name" size="small" style="width:400px"></Input>
                    </FormItem>
                    <FormItem label="地址:">
                        <Input v-model="cameraForm.location" size="small" style="width:400px"></Input>
                    </FormItem>
                    <FormItem label="ip:">
                        <Input v-model="cameraForm.ip" size="small" style="width:400px"></Input>
                    </FormItem>
                    <FormItem label="url:">
                        <Input v-model="cameraForm.url" size="small" style="width:400px"></Input>
                    </FormItem>
                </Form>
            </Modal>
        </div>
        <Page transfer :total="cameraTotal" :page-size="cameraPageSize" size="small"
         @on-change="cameraPageChange" show-elevator show-total style="margin: 10px;"/>
    </div>


</template>
<script>
import util from "../../api/util.js";
export default {
    mounted() {
        this.getCameraData(this.cameraPageSize, this.cameraCurrentPage)
    },
    data() {
        return {
            editModal: false,
            modalTitle: "编辑摄像头信息",
            labelWidth: 100,
            columns7: [
                {
                    title: '序号',
                    key: 'showid',
                    width: 65,
                    align: "center"
                },
                {
                    title: '摄像头名称',
                    key: 'name',
                    align: "center"
                },
                {
                    title: '地址',
                    key: 'location',
                    align: "center"
                },
                {
                    title: 'ip',
                    key: 'ip',
                    align: "center"
                },
                {
                    title: 'url',
                    key: 'url',
                    align: "center"
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.status = "editCamera";
                                        this.editModal = true;
                                        this.cameraForm.id = params.row.id;
                                        this.cameraForm.showid = params.row.showid;
                                        this.cameraForm.name = params.row.name;
                                        this.cameraForm.location = params.row.location;
                                        this.cameraForm.ip = params.row.ip;
                                        this.cameraForm.url = params.row.url;
                                    }
                                }
                            }, '编辑'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.removeCamera(params.row)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            cameraData: [],
            cameraTotal: 0,
            cameraPageSize: 10,
            cameraCurrentPage: 1,
            cameraForm: {
                id: "",
                name: "",
                location: "",
                ip: "",
                url: "",
            }
        }
    },
    methods: {
        getCameraData(pageSize, currentPage) {
            let self = this;
            let param = {
                action: "getCameraData",
                pageSize: pageSize,
                currentPage: currentPage
            }

            util.post(self, "camera/getCameraData", param, function (res) {
                self.cameraData = res.data.data;
                self.cameraTotal = res.data.count;
            })
        },
        show(index) {
            this.$Modal.info({
                title: 'User Info',
                content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
            })
        },
        remove(index) {
            this.data6.splice(index, 1);
        },
        save() {
            let self = this;
            let params = {
                status: self.status,
                camera: self.cameraForm
            };
            util.post(self, "camera/" + self.status, params, function (res) {
                console.log(res.data);
                if (res.data) {
                    self.$Notice.success({ title: res.data.data });
                    self.getCameraData(self.cameraPageSize, self.cameraCurrentPage)
                }
            })
        },
        addModal(){
            this.status = "addCamera";
            this.modalTitle = "新增摄像头信息";
            this.editModal = true;
            this.cameraForm.id = "";
            this.cameraForm.name = "";
            this.cameraForm.location = "";
            this.cameraForm.ip = "";
            this.cameraForm.url = "";
        },
        removeCamera(row){
            console.log(row+"========")
            let self = this;
            let param = {
                action:"remove",
                camera:row
            };
            util.post(self, "camera/removeCamera", param, function(res){
                if(res.data == "ok"){
                    self.$Notice.success({title:"删除成功"});
                    self.getCameraData(self.cameraPageSize, self.cameraCurrentPage)
                    
                }
            })
        },
        cameraPageChange(page){
            this.cameraCurrentPage = page;
            this.getCameraData(this.cameraPageSize, this.cameraCurrentPage)
        },
    }
}
</script>
<style scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f0f0f0;
}

.left {
    flex: 1;
}

.right {
    margin-left: 10px;
    margin-right: 20px;
}
</style>